import React, {FC} from 'react';
import {View, Text, StyleSheet, Dimensions, Image} from 'react-native';
type PropsType = {
  item: GoodsSimple;
};
const {width: SCREEN_WIDTH} = Dimensions.get('window');
const Item: FC<PropsType> = (props: PropsType) => {
  const {item} = props;
  return (
    <View style={styles.item}>
      <Image style={styles.img} source={{uri: item.image}} />
      <Text style={styles.titleTxt}>{item.title}</Text>
      {item.promotion && (
        <Text style={styles.promotionTxt}>{item.promotion}</Text>
      )}
      <Text style={styles.prefix}>
        ¥
        <Text style={styles.prefixTxt}>
          {item.price}
          {item.originPrice && (
            <Text style={styles.originTxt}> 原价: {item.originPrice}</Text>
          )}
        </Text>
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  item: {
    width: (SCREEN_WIDTH - 18) / 2,
    borderRadius: 8,
    overflow: 'hidden',
    marginLeft: 6,
    marginTop: 6,
  },
  img: {
    width: '100%',
    height: 200,
    resizeMode: 'cover',
  },
  titleTxt: {
    fontSize: 14,
    color: '#333',
    marginTop: 6,
  },
  prefix: {
    fontSize: 14,
    color: '#333',
    fontWeight: 'bold',
    marginTop: 4,
  },
  prefixTxt: {
    fontSize: 22,
    color: '#333',
    fontWeight: 'bold',
    textAlign: 'justify',
  },
  originTxt: {
    fontSize: 13,
    color: '#999',
    fontWeight: 'normal',
  },
  promotionTxt: {
    width: 78,
    fontSize: 12,
    color: '#999',
    borderRadius: 2,
    borderWidth: 1,
    borderColor: '#bbb',
    textAlign: 'center',
    marginTop: 4,
  },
});
export default Item;
